<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      left-arrow
      title="文章详情"
      @click-left="$router.go(-1)"
    />

    <h2 class="title">{{ detail.title }}</h2>

    <!-- 作者资料 -->
    <div class="author-box">
      <van-image fit="cover" round :src="detail.aut_photo"></van-image>
      <div class="info-box">
        <div>{{ detail.aut_name }}</div>
        <span class="time">{{ detail.pubdate | relvTime }}</span>
      </div>
      <van-button round type="info">+ 关注</van-button>
    </div>

    <!-- 文章区域 -->
    <div class="content" v-html="detail.content"></div>

    <van-divider>end</van-divider>

    <!-- 点赞区域 -->
    <div style="display: flex; justify-content: space-around">
      <van-button round plain icon="good-job-o" type="primary">点赞</van-button>
      <van-button round plain icon="delete-o" type="danger">不喜欢</van-button>
    </div>

    <!-- 评论区域 -->
    <comment />
  </div>
</template>

<script>
import { articleDetailAPI } from '@/api'
// 导入组件
import comment from './comment'
export default {
  components: {
    comment
  },
  data() {
    return {
      detail: {}
    }
  },

  async created() {
    let res = await articleDetailAPI(this.$route.query.id)
    this.detail = res.data.data
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 22px;
  margin: 20px;
}

.author-box {
  display: flex;
  align-items: center;
  margin: 0 20px;

  .van-image {
    width: 80px;
    height: 80px;
  }

  .info-box {
    flex: 1;
    margin-left: 10px;

    .time {
      color: gray;
      font-size: 14px;
    }
  }
}

.content {
  margin: 20px;
  font-size: 16px;
  word-break: break-all;

  // 空格在css中代表后代选择器的意思
  // 既然是后代，在less中可以包成大括号
  ::v-deep {
    img {
      width: 100%;
    }
    pre {
      overflow: auto;
      background-color: #000;
      color: #dcdcdc;
    }
  }
}
</style>
